<template>
  <div class="goodsAdd">
    <Breadcrumb name1="商品管理" name2="商品添加"> </Breadcrumb>
    <el-card>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="商品描述" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number
            v-model="ruleForm.price"
            :min="0"
            :max="999999"
            :step="10"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
          <el-cascader
            ref="cascaderRef"
            v-model="ruleForm.type"
            :options="options"
            :show-all-levels="false"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="添加商品图片" class="imgs">
          <el-input
            placeholder="请输入网络图片Url地址"
            v-model="img1"
            clearable
          >
          </el-input>
          <el-button type="primary" size="small" @click="previewImg(img1)"
            >预览此效果</el-button
          >
          <el-input
            placeholder="请输入网络图片Url地址"
            v-model="img2"
            clearable
          >
          </el-input
          ><el-button type="primary" size="small" @click="previewImg(img2)"
            >预览此效果</el-button
          >
          <el-input
            placeholder="请输入网络图片Url地址"
            v-model="img3"
            clearable
          >
          </el-input
          ><el-button type="primary" size="small" @click="previewImg(img3)"
            >预览此效果</el-button
          >
          <el-input
            placeholder="请输入网络图片Url地址"
            v-model="img4"
            clearable
          >
          </el-input
          ><el-button type="primary" size="small" @click="previewImg(img4)"
            >预览此效果</el-button
          >
        </el-form-item>
        <el-form-item label="商品描述图片" class="showimg">
          <el-input
            placeholder="请输入网络图片Url地址"
            v-model="showimg"
            clearable
          >
          </el-input>
          <el-button type="primary" size="small" @click="previewImg(showimg)"
            >预览此效果</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即添加</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import Breadcrumb from '@/components/breadcrumb'
import { getCategory, addGoods } from '@/api'
import { Message } from 'element-ui'
export default {
  components: {
    Breadcrumb,
  },
  data() {
    return {
      options: [],
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      imgs: [],
      showimg: '',
      ruleForm: {
        name: '',
        desc: '',
        price: '',
        type: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur',
          },
        ],
        desc: [{ required: true, message: '请填写商品描述', trigger: 'blur' }],
        price: [{ required: true, message: '请填写商品价格', trigger: 'blur' }],
        type: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getCategory()
  },
  methods: {
    async getCategory() {
      const { data: res } = await getCategory()
      this.options = res.data
      this.options.forEach((item) => {
        item.label = item.gname
        item.value = item.gid
        if (item.children.length > 0) {
          item.children.forEach((child) => {
            child.label = child.gname
            child.value = child.bid
          })
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.img1 = this.img2 = this.img3 = this.img4 = this.showimg = ''
    },
    previewImg(val) {
      let reg =
        /^(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$/
      if (!reg.test(val)) {
        Message({
          message: '请输入正确的图片地址',
          type: 'error',
        })
      }
      this.open(val)
    },
    open(val) {
      this.$alert(
        `<div"><img
      style="width: 100%; height: 100%"
      src=${val}
      :fit="fit"></img></div>`,
        '预览图片',
        {
          dangerouslyUseHTMLString: true,
        },
      )
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.imgs = `${this.img1}$${this.img2}$${this.img3}$${this.img4}`
          this.$confirm('看清楚所有的信息填写都准确吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(async () => {
            let data = {
              brand: this.$refs.cascaderRef.inputValue,
              name: this.ruleForm.name,
              desc: this.ruleForm.desc,
              price: this.ruleForm.price,
              img: this.imgs,
              showimg: this.showimg,
              gid: this.ruleForm.type[0],
              bid: this.ruleForm.type[1],
            }
            const { data: res } = await addGoods(data)
            if (res.code == 1) {
              Message({
                message: '添加成功',
                type: 'success',
              })
              this.$refs[formName].resetFields()
              this.img1 = this.img2 = this.img3 = this.img4 = this.showimg = ''
            } else {
              Message({
                message: res.msg,
                type: 'error',
              })
            }
          })
        } else {
          Message({
            message: '请填写完整信息',
            type: 'error',
          })
          return false
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.goodsAdd {
  .imgs {
    .el-input {
      width: 70%;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  ::v-deep .el-message-box__content {
    max-height: 800px;
    overflow: auto;
  }
  .showimg {
    margin-top: 20px;
    .el-input {
      width: 70%;
      margin-right: 10px;
    }
  }
}
</style>
